<template>
  <div class="table">
    <div class="search">
      <slot name="search" />
    </div>
    <div class="container">
      <table-vue :columns="columns" :list="list" :updateFunc="updateFunc" :tableId="tableId" :expand="expand"
        :expand-cal="expandCal" :cellStyle="cellStyle" :tableHeaderCell="tableHeaderCell" />
    </div>
    <div class="pagination bottom">
      <slot name="pagination" />
    </div>
  </div>
</template>
<script lang="ts" setup>
import { defineAsyncComponent } from 'vue'
import { table, Header } from './table'
const { template, getTable } = table()
getTable()

defineProps({
  tableHeaderCell: {
    type: Function,
    default: () => {
      return {
        background: 'rgba(235, 235, 235, 1)',
        color: 'black',
        'height': '72px',
        'font-size':'16px'
      }
    },
  },
  cellStyle: {
    type: Object,
    default: { 'color': 'black', 'tont-size': '500','font-size':'16px' }
  },
  columns: {
    type: Array<Header>,
    required: true
  },
  list: {
    type: Array<any>,
    required: true
  },
  updateFunc: {
    type: Function,
    default: null
  },
  tableId: {
    type: String,
    default: 'id' // 根据字段进行weight拖动
  },
  expand: {
    type: Boolean // 是否展开
  },
  expandCal: {
    type: Function // 展开回调
  }
})

const tableVue = defineAsyncComponent({
  loader: () => import(`./${template.value}/Table.vue`),
  delay: 200,
  timeout: 3000
})
</script>
<style lang="scss">
.search,
.pagination {
  margin-top: 10px;
  display: flex;
}

.table {
  background: white;
  // height: 72vh;
}
</style>
